<!-- 弹窗组件小龙开发所有 -->
<template>
	<view>
		<!-- 模态框 -->
		<view @tap="Modal" :class="{ mask: model }"></view>
		<!-- 弹窗主体 -->
		<view :style="{ height: barHidth + 'rpx' }" class="active" :class="{ add: model }">
			<view class="title">{{ title }} <text @tap="close">x</text></view>
			<view class="cont" :style="{ height: barHidth - 80 + 'rpx' }">
				<!-- 天 -->
				<scroll-view class="day" :scroll-y="true">
					<view :class="index === isIndex ? 'active_copy' : ''" v-for="(item, index) in content"
						:key="item.id" @tap="dataCallback(index, item)">{{ item.timezh }}</view>
				</scroll-view>

				<!-- 时 -->
				<scroll-view class="content" :scroll-y="true" :scroll-top="scrollTop">
					<view class="appoint" :class="index === Indexes ? 'longActive' : ''"
						@tap="timeCallback(index, item)" v-for="(item, index) in Days" :key="index">{{ item.timestr
            }}<text :class="index === Indexes ? 'cuIcon-check' : ''"></text></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//弹窗组件标题
			title: {
				type: String,
				default: "请传入title",
			},
			//弹窗组件数据
			content: {
				type: Array,
				// 默认测试数据
				default: () => [{
					timezh: "今天 (周三)",
					timeformatter: "8-10",
					id: 108,
					timelist: [{
							timestr: "立即送达",
						},
						{
							timestr: "15:35",
						},
						{
							timestr: "16:05",
						},
					],
				}, ],
			},
			//弹窗 窗口高度
			barHidth: {
				type: Number,
				default: 400,
			},
			//点击模态框是否能关闭弹窗
			dodge: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				scrollTop: 0,
				isIndex: 0,
				Indexes: 0,
				Days: [],
				model: false,
			};
		},

		//初始化数据
		watch: {
			content: {
				immediate: true,
				handler(newValue, oldValue) {
					this.Days = this.content[0]?.timelist;
				},
			},
		},

		methods: {
			// 关闭窗口
			close() {
				this.model = false;
			},

			// 打开窗口
			open() {
				this.model = true;
			},

			// 点击模态框关闭窗口
			Modal() {
				if (this.dodge) {
					this.close();
				}
			},


			//时间切换回顶
			gotop() {
				this.scrollTop = 1;
				this.$nextTick(function() {
					this.scrollTop = 0;
				});
			},

			//切换日期
			dataCallback(inedx, item) {
				this.isIndex = inedx;
				this.Days = this.content[inedx].timelist;
				this.Indexes = null;
				this.gotop();
				this.$emit("dataCallback", item);
			},

			//选择时间
			timeCallback(inedx, item) {
				let timeParms = {
					timezh: this.content[this.isIndex].timezh,
					...item
				}
				this.Indexes = inedx;
				this.modalName = null;
				this.$emit("timeCallback", timeParms);
			},
		},
	};
</script>

<style scoped>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		animation: getInto 0.5s 1;
		opacity: 0.5;
		z-index: 999;
	}

	@keyframes getInto {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 0.5;
		}
	}

	.active {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 400rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		overflow: hidden;
		transform: translateY(100%);
		transition: 0.4s;
	}

	.add {
		transform: translateY(0);
	}

	.title {
		position: relative;
		text-align: center;
		background-color: #fff;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #eee;
	}

	.title>text {
		position: absolute;
		right: 14rpx;
		width: 46rpx;
		height: 46rpx;
		line-height: 38rpx;
		background-color: #ccc;
		color: #fff;
		border-radius: 50%;
	}

	.cont {
		display: flex;
		background-color: #fff;
		overflow-y: scroll;
	}

	.day {
		flex: 2;
		background-color: #fff;
		border-right: 2rpx solid #f8f8f8;
		text-align: center;
		border-bottom: 20px solid #fff;
	}

	.day view {
		padding: 30rpx 12rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.content {
		flex: 4;
		font-size: 28rpx;
		border-bottom: 40rpx solid #fff;
		background-color: #fff;
	}

	.appoint {
		text-align: left;
		padding: 30rpx;
		border-bottom: 2rpx solid #f8f8f8;
	}

	.appoint text {
		margin-left: 30rpx;
	}

	.active_copy {
		position: relative;
		background-color: #fb7936;
		color: #fff;
		box-sizing: border-box;
	}

	.active_copy::after {
		content: "";
		width: 5rpx;
		height: 94rpx;
		background: #fe6053;
		position: absolute;
		top: 0;
		right: 0;
	}

	.longActive {
		position: relative;
		color: #fb7936;
	}

	.cuIcon-check {
		position: absolute;
		width: 30rpx;
		left: 210rpx;
		height: 16rpx;
		border-bottom: 4rpx solid #fb7936;
		border-left: 4rpx solid #fb7936;
		transform: rotate(-45deg);
	}

	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
</style>